<template>
	<view class="form-container">
		<view class="form-item">
			<label class="label">姓名</label>
			<input v-model="form.name" type="text" placeholder="请输入" class="input"
				:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]" />
		</view>
		<view class="form-item">
			<label class="label">手机号</label>
			<input v-model="form.phone" type="number" placeholder="请输入" class="input"
				:rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]" />
		</view>
		<view class="form-item">
			<label class="label">紧急联系人</label>
			<input v-model="form.emergencyContact" type="text" placeholder="请输入" class="input"
				:rules="[{ required: true, message: '请输入紧急联系人', trigger: 'blur' }]" />
		</view>
		<view class="form-item">
			<label class="label">紧急联系人电话</label>
			<input v-model="form.emergencyContactPhone" type="number" placeholder="请输入" class="input"
				:rules="[{ required: true, message: '请输入紧急联系人电话', trigger: 'blur' }]" />
		</view>
		<view class="form-item">
			<label class="label">身份证正面</label>
			<view class="uploader">
				<image :src="form.idCardFront" mode="aspectFit" />
				<view class="upload-button" @tap="chooseImage('idCardPositive')">
					<text>上传照片</text>
				</view>
			</view>
		</view>
		<view class="form-item">
			<label class="label">身份证反面</label>
			<view class="uploader">
				<image :src="form.idCardBack" mode="aspectFit" />
				<view class="upload-button" @tap="chooseImage('idCardBack')">
					<text>上传照片</text>
				</view>
			</view>
		</view>
		<button type="primary" @tap="submit">提交</button>

	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { updateUser } from '@/services/mine';
	const form = reactive({
		userId: '',
		realName: '',
		phone: '',
		// emergencyContact: '',
		// emergencyContactPhone: '',
		idCardFront: '',
		idCardBack:''
	});

	// const chooseImage = (type: string) => {
	//   uni.chooseImage({
	//     count: 1,
	//     success: (res) => {
	//       if (type === 'idCardPositive') {
	//         form.idCardPositive.push({ url: res.tempFilePaths[0] });
	//       } else if (type === 'idCardBack') {
	//         form.idCardBack.push({ url: res.tempFilePaths[0] });
	//       }
	//     }
	//   });
	// };

	const submit = () => {
		// 这里进行表单验证逻辑
		// 如果验证通过，则执行提交操作
		updateUser()
		uni.navigateTo({
			url: "/pages/prompt/prompt?msg=提交成功"
		});
	};
</script>

<style scoped>
	.form-container {
		padding: 20rpx;
	}

	.form-item {
		margin-bottom: 20rpx;
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}

	.uploader {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.upload-button {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	.submit-button {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background-color: #1aad19;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}
</style>